<route>
    {
        meta: {
            layout: 'nepu',
            title:'角色管理'
        }
    }  
</route>
<template>
    <view>


        <a-row>
            <a-col :span="5">
                <DeptTree @confirm="handleSearch"></DeptTree>
            </a-col>
            <a-col :span="19">
                <a-row>
                    <a-input-search allow-clear v-model:value="queryParams.searchKey" placeholder="角色名称/标识"
                        style="width: 200px; margin-bottom: 10px; margin-right: 50px;" @search="reqData()" />
                    <a-button v-if="$.hasPerm('rbac:role:create')" type="primary" style="margin-bottom: 10px; width: 80px;"
                        @click="$.emit('create-role', null)">
                        <template #icon><plus-outlined /></template>新增
                    </a-button>
                    <a-button style="margin-bottom: 10px; left:30px; width: 80px;" @click="resetQuery()">
                        <template #icon>
                            <SyncOutlined />
                        </template>重置
                    </a-button>
                </a-row>
                <AntdZh>
                    <a-table :columns="customColumns" :data-source="dataSource" :loading="loading" :pagination="pagination"
                        @change="handleTableChange">
                        <template #bodyCell="{ column, record, index }">
                            <template v-if="column.dataIndex === 'nickName'">
                                <a-badge>
                                    <template #count>
                                        <WomanOutlined v-if="record.sex == '女'" style="color: #f5222d" />
                                        <ManOutlined v-else style="color: #53bfee" />

                                    </template>
                                    <view v-if="record.avatar == null">
                                        <a-avatar shape="square" size="large"
                                            :style="{ backgroundColor: colorList[record.nickName.charCodeAt(0) % 7], verticalAlign: 'middle' }">
                                            {{ record.nickName.substring(0, 1) }}
                                        </a-avatar>
                                    </view>
                                    <view v-else>
                                        <a-avatar :src="record.avatar" shape="square" size="large"></a-avatar>
                                    </view>
                                </a-badge>
                                {{ record.nickName }}
                            </template>
                            <template v-else-if="column.dataIndex === 'dept'">
                                <view v-if="deptStore.deptMap">
                                    {{ deptStore.getDeptName(record.deptId) || null }}
                                </view>

                            </template>
                            <template v-else-if="column.dataIndex === 'status'">
                                <!--执行状态-->
                                <a-tag color="green" v-if="record.status">启用</a-tag>
                                <a-tag color="red" v-else>停用</a-tag>

                            </template>
                            <template v-if="column.dataIndex === 'action'">
                                <a-row>
                                    <a-col :span="6">
                                        <a-tooltip>
                                            <template #title>修改信息</template>
                                            <view v-isAdmin>
                                                <a-button type="link" @click="$.emit('update-role', record.id)">
                                                    <FormOutlined />
                                                </a-button>
                                            </view>
                                        </a-tooltip>
                                    </a-col>
                                    <a-col :span="6">
                                        <a-popconfirm title="是否删除该角色 ?" @confirm="handleDelete(record.id)">
                                            <a-tooltip>
                                                <template #title>删除角色</template>
                                                <view v-isAdmin>
                                                    <a-button type="link">
                                                        <DeleteOutlined style="color: #f5222d;" />
                                                    </a-button>
                                                </view>
                                            </a-tooltip>
                                        </a-popconfirm>

                                    </a-col>
                                    <a-col :span="6">
                                        <a-tooltip>
                                            <template #title>用户授权</template>
                                            <a-button v-if="$.hasPerm('rbac:user:grant')" type="link"
                                                @click="$.emit('role-user-grant', record)">
                                                <SafetyOutlined style="color: green;" />
                                            </a-button>

                                        </a-tooltip>
                                    </a-col>
                                </a-row>


                            </template>
                        </template>
                    </a-table>
                </AntdZh>
            </a-col>
        </a-row>
        <RoleCreateModal></RoleCreateModal>
        <RoleUpdateModal />
        <RoleUserGrantManager />
    </view>
</template>
<script setup>
import RoleCreateModal from './components/RoleCreateModal.vue';
import RoleUpdateModal from './components/RoleUpdateModal.vue';
import RoleUserGrantManager from './components/RoleUserGrantManager/index.vue';
import { queryList, deleteOne } from '@/custom/nepu/api/role';
import DeptTree from '@/module/org/components/DeptTree';
import { SafetyOutlined, DeleteOutlined, FormOutlined, KeyOutlined, PlusOutlined, SyncOutlined } from '@ant-design/icons-vue';
import useApp from '@/hooks';
const { $ } = useApp();
import useDeptStore from '@/module/org/store/dept';
const deptStore = useDeptStore();
import { columns, defaultQueryParams } from './index';
const customColumns = ref(columns);
const queryParams = ref($.freeStore(defaultQueryParams));
const dataSource = ref([]);
const total = ref(0);
const loading = ref(false);
const pagination = computed(() => ({
    total: total.value,
    current: queryParams.pageNum,
    pageSize: queryParams.pageSize,
}));
// 重置
function resetQuery() {
    queryParams.value = $.freeStore(defaultQueryParams);
    reqData();
}
// 删
function handleDelete(id) {
    deleteOne(id).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        reqData()
    })
}
// 部门选中
function handleSearch(deptId) {
    queryParams.value.deptId = deptId;
    reqData();
}
function handleTableChange(page, filters, sorted) {


    queryParams.value.pageSize = page.pageSize;
    queryParams.value.pageNum = page.current;

    // 状态
    var status = filters.status;
    console.log(status)
    if ($.isNotEmpty(status)) {
        queryParams.value.status = status[0];
    } else {
        queryParams.value.status = null
    }


    reqData();
}
// 请求数据
function reqData() {
    loading.value = true;
    queryList(queryParams.value).then(res => {
        console.log(res)
        loading.value = false;
        dataSource.value = res.content;
        total.value = res.totalElements;
    })
}
reqData();
$.on('fresh-role', r => {
    reqData();
});
</script>